<template>
  <el-container class="setting_role-setting">
    <!-- <el-button class="fixedRight" type="primary" icon="el-icon-sort" @click="$showHide()" size="small" /> -->
    <el-main>
      <div class="card-list">
        <el-card shadow="never" class="selectCard searchColumn">
          <el-form label-position="right" label-width="6rem">
            <el-row :gutter="40">
              <!-- <el-col :span="8">
                <el-form-item label="角色编码">
                  <el-input v-model="params.code" />
                </el-form-item>
              </el-col> -->
              <el-col :span="8">
                <el-form-item label="角色名称：">
                  <el-input v-model="params.name" />
                </el-form-item>
              </el-col>
              <!-- <el-col :span="8">
                <el-form-item label="角色类型">
                  <el-select v-model="params.roleType">
                    <el-option label="测试" value="0" />
                  </el-select>
                </el-form-item>
              </el-col> -->
            </el-row>
            <SearchButton
              :default-params="params"
              @refreshParams="refreshParams"
              @getList="getList1"
            />
          </el-form>
        </el-card>
        <el-card shadow="never" class="tableCard">
          <vxe-toolbar
            :custom="{ icon: 'el-icon-s-operation' }"
            :refresh="{ query: getList1 }"
            print
          >
            <template v-slot:buttons>
              <el-button
                type="primary"
                size="small"
                icon="el-icon-plus"
                @click="openDialog('')"
              >新增</el-button>
            </template>
            <!-- <template v-slot:tools>1</template> -->
          </vxe-toolbar>
          <vxe-table
            ref="xTable"
            border
            resizable
            highlight-hover-row
            :loading="loading"
            :auto-resize="true"
            :data="tableData"
            width
            max-height="500"
            :print-config="{}"
          >
            <vxe-table-column type="seq" title=" " width="50" align="center" />
            <vxe-table-column
              field="name"
              width="220"
              title="角色名称"
            />
            <vxe-table-column field="remark" title="角色描述" min-width="200">
              <template slot-scope="scope">
                <p class="a-row" :title="scope.row.remark">
                  {{ scope.row.remark }}
                </p>
              </template>
            </vxe-table-column>
            <vxe-table-column
              field="count"
              width="120"
              align="center"
              title="账号数量"
            />
            <!-- <vxe-table-column field="code" align="center" title="角色编码" /> -->
            <vxe-table-column
              title="状态"
              width="80"
              align="center"
              slots="default"
            >
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.publishStatus"
                  :inactive-value="0"
                  :active-value="1"
                  active-text
                  inactive-text
                  @change="changeState(scope)"
                />
              </template>
            </vxe-table-column>
            <vxe-table-column
              title="操作"
              fixed="right"
              align="center"
              width="160"
              slots="default"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, true)"
                >查看</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="openDialog(scope.row.id, false)"
                >编辑</el-button>
                <el-button
                  v-if="scope.row.publishStatus != 1"
                  type="text"
                  size="mini"
                  @click="delRoleById(scope.row.id)"
                >删除</el-button>
                <el-button
                  type="text"
                  size="mini"
                  @click="setUser(scope.row.id)"
                >用户关联</el-button>
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :current-page.sync="tableCurrentPage"
            :page-size.sync="pageSize"
            :total="total"
            :layouts="[
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            @page-change="getList()"
          />
        </el-card>
      </div>
    </el-main>
    <role-edit ref="roleEdit" :parent-id="selectId" @refresh="getList()" />
    <el-dialog
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      title="用户分配"
      width="50%"
    >
      <div style="text-align: center">
        <vxe-table
          ref="treeTable"
          :auto-resize="true"
          resizable
          row-id="id"
          :checkbox-config="{ checkRowKeys: defaultSelecteRows }"
          tree-config
          border
          highlight-hover-row
          highlight-current-row
          height="400"
          :data="userList"
          header-align="center"
        >
          <vxe-table-column type="checkbox" field="checked" width="40" />
          <vxe-table-column field="userCode" min-width="150" title="登录账号">
            <template slot-scope="scope">
              <div>(+86){{ scope.row.userCode }}</div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="name" min-width="100" title="用户名" />
          <vxe-table-column field="mobile" min-width="150" title="联系电话" />
        </vxe-table>
        <vxe-pager
          :current-page.sync="publishParams.pageNum"
          :page-size.sync="publishParams.pageSize"
          :total="total1"
          :layouts="[
            'PrevJump',
            'PrevPage',
            'Number',
            'NextPage',
            'NextJump',
            'FullJump',
            'Total',
          ]"
          @page-change="getUserList"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="setUserRole()">保存</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import SearchButton from '@/components/SearchButton'
import roleEdit from './components/roleEdit'
// import { getList } from '@/api/user'
import {
  getPageList,
  updateState,
  delRoleById,
  getUserInfoByRoleId,
  userModifyByRoleId,
  userPageList
} from '@/api/role'
export default {
  components: {
    SearchButton,
    roleEdit
  },
  data() {
    return {
      publishParams: {
        publishStatus: 1,
        pageNum: 1,
        pageSize: 10
      },
      total1: 1,
      chooseUser: [],
      userIds: [],
      userIdsNew: [],
      userList: [],
      title: '蜂网电子商务',
      dialogVisible: false,
      disabledEdit: false,
      params: {
        name: ''
      },
      tableData: [
        {
          name: '111',
          id: 1
        }
      ],
      tableCurrentPage: 1,
      pageSize: 20,
      total: 0,
      selectId: '',
      loading: false,
      nowRoleId: '',
      defaultSelecteRows: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    setUserRole() {
      this.userIds = []
      this.chooseUser = this.$refs.treeTable.getCheckboxRecords()
      if (this.chooseUser.length === 0) {
        this.$message.error('请选择用户')
        return false
      }
      this.chooseUser.forEach((item, index) => {
        this.userIds[index] = item.id
      })
      var paramsVal = {
        userIds: this.userIds,
        roleId: this.nowRoleId
      }
      userModifyByRoleId(paramsVal).then((response) => {
        this.dialogVisible = false
      })
    },
    openDialog(id, bool) {
      this.disabledEdit = bool
      this.selectId = id
      setTimeout(() => {
        this.$refs.roleEdit.init(bool)
      })
    },
    refreshParams() {
      this.params = {}
    },
    setUser(id) {
      this.dialogVisible = true
      this.nowRoleId = id
      this.getUserList()
    },
    getUserInfo() {
      getUserInfoByRoleId(this.nowRoleId).then((response) => {
        response.forEach((item, index) => {
          this.userList.forEach((it, idx) => {
            if (item === it.id) {
              this.$refs.treeTable.setCheckboxRow(this.userList[idx], true)
            }
          })
        })
      })
    },
    getUserList() {
      // getList({}).then(response => {
      //   this.userList = response
      //   this.getUserInfo()
      // })
      userPageList(this.publishParams).then((response) => {
        this.userList = response.records
        this.total1 = response.total
        console.log('service-upms/b/user/v1/pageList', response)
        this.getUserInfo()
      })
    },
    getList1() {
      this.tableCurrentPage = 1
      this.getList()
    },
    getList() {
      getPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ...this.params
      }).then((response) => {
        this.tableData = response.records
        this.total = response.total
      })
    },
    changeState(scope) {
      this.tableData[scope.seq - 1].publishStatus =
        scope.row.publishStatus === 1 ? 0 : 1
      updateState({
        id: scope.row.id,
        status: scope.row.publishStatus === 1 ? 0 : 1
      }).then((response) => {
        this.tableData[scope.seq - 1].publishStatus =
          scope.row.publishStatus === 1 ? 0 : 1
        this.$message.success(
          scope.row.publishStatus === 0 ? '禁用成功' : '启用成功'
        )
      })
    },
    delRoleById(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delRoleById({
            id: id
          }).then((response) => {
            this.$message.success('删除成功')
            this.getList()
          })
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    }
  }
}
</script>

<style lang="scss">
.setting_role-setting {
  .card-list {
    width: 100%;
  }
}
</style>
